import React, { useState, useRef, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { PullToRefresh, VirtualList, InfiniteScroll, NavBar, Image, Tag, Icon, Button } from '@antmjs/vantui';
import Taro,{getMenuButtonBoundingClientRect}from '@tarojs/taro';
import { HOST, diffTime, getUserInfo } from '../../../../utils/const'
import './index.scss'

const pla = { android: "安卓", ios: "苹果", windows: "windows", mac: 'mac' }
export default function AppVersionList() {
    const btn = getMenuButtonBoundingClientRect();
    const [data, setData] = useState([]);
    const [listData,setListData] =useState([])
    const infiniteScrollRef = useRef();
    const virtualListRef = useRef();

    useEffect(() => {
        if (Taro.getStorageSync("footprint")) {
          setListData(JSON.parse(Taro.getStorageSync("footprint")));
        }
      }, []);

    return (
        <View className='mycoins-frame-view'>
            <NavBar title='我的足迹' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed />
            <View style={{paddingTop:btn.bottom+20}}>
            <PullToRefresh>
                <VirtualList
                    style={{ padding: 10, boxSizing: 'border-box'}}
                    height="calc(100vh - 135px)"
                    dataSource={listData}
                    showCount={3}
                    ref={virtualListRef}
                    ItemRender={({ item }) => {
                        return (
                            <View className='list-bg-view' onClick={() => Taro.navigateTo({ url: `/pages/home/components/app_detail/index?id=${item.id}&version=${item.version}` })} >
                                <View className='img'>
                                    <Image src={HOST + item?.icon} radius={'8%'} width={120} height={120} />
                                </View>
                                <View className='info-text'>
                                    <View>
                                        {item?.name||''}
                                    </View>
                                    <View className='tag-view'>
                                        <Icon name="star" color="#13b858" size={40} />
                                        <Text className="star-text">{item?.core||''}</Text>
                                        <View className='version-view'>{item?.version||''}</View>
                                        <View className='version-view'>{item?.create_time ? diffTime(new Date(item?.create_time).getTime()) : '未知'}</View>
                                    </View>
                                    <View className='tag-view'>
                                        <Tag className='tag' type="primary">{item?.platform ? pla[item.platform] : ''}</Tag>
                                        <View className='version-view'>{item?.size||''}</View>
                                        <View className='separate-veiw'>·</View>
                                        <View className='version-view'>200下载</View>
                                    </View>
                                </View>
                                <View className='time-view'>
                                    <Button 
                                     onClick={() => Taro.navigateTo({ url: `/pages/home/components/down_load_file/index?link=${item?.link}` })}
                                     className='btn' type='primary' size='mini'>下载</Button>
                                </View>
                            </View>
                        );
                    }}
                />
            </PullToRefresh>
            </View>
        </View>
    );
}